<template>
  <div :id="idName" :style="{ width: width, height: height }" />
</template>

<script>
export default {
  props: {
    idName: {
      type: String,
      default: 'chart-bubble'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    // 释放图表实例
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.idName));
      this.chart.setOption(this.getOptions());
    },
    getOptions() {
      // 随机配色1
      const colors1 = [
        '#FFEE7D',
        '#448EF6',
        '#769353',
        '#6DB193',
        '#FDBE34',
        '#75C2F6'
      ];

      // 随机配色2
      const colors2 = [
        '#79DC96',
        '#6E7DA2',
        '#346473',
        '#B689B0',
        '#FFE981',
        '#E4F9F5'
      ];

      const MOCK = [
        {
          name: '15届',
          data: [
            [66, 0.1935483870967742, 341, '土木工程学院'],
            [300, 0.7537688442211056, 398, '新闻与传播学院'],
            [118, 0.5728155339805825, 206, '化学化工学院'],
            [37, 0.22424242424242424, 165, '物理与电子工程学院'],
            [67, 0.4785714285714286, 140, '建筑与城市规划学院'],
            [167, 0.5921985815602837, 282, '美术与设计学院'],
            [120, 0.2146788990825688, 109, '生命科学学院'],
            [7, 0.07142857142857142, 98, '体育学院']
          ]
        },
        {
          name: '14届',
          data: [
            [98, 0.6901408450704225, 142, '法学院'],
            [223, 0.2121212121212121, 165, '公共管理学院'],
            [168, 0.835820895522388, 201, '人文学院'],
            [47, 0.2974683544303797, 158, '生命科学学院'],
            [16, 0.15384615384615385, 104, '体育学院'],
            [165, 0.8918918918918919, 185, '外国语学院'],
            [235, 0.7704918032786885, 305, '新闻与传播学院'],
            [210, 0.5108108108108109, 111, '音乐舞蹈学院']
          ]
        },
        {
          name: '13届',
          data: [
            [82, 0.5616438356164384, 146, '数学与信息科学学院'],
            [172, 0.6539923954372624, 263, '美术与设计学院'],
            [175, 0.8293838862559242, 211, '人文学院'],
            [213, 0.7526501766784452, 283, '新闻与传播学院'],
            [72, 0.35467980295566504, 203, '生命科学学院'],
            [270, 0.3649122807017544, 285, '土木工程学院'],
            [25, 0.10909090909090909, 110, '体育学院'],
            [160, 0.2962962962962963, 108, '音乐舞蹈学院']
          ]
        }
      ];
      // 获取 Series
      const getSeries = (data) =>
        data.map((_, index) => ({
          name: _.name,
          data: _.data,
          type: 'scatter',
          symbolSize: (val) => {
            // 获取所有values
            const values = data
              .map((_) => _.data)
              .flat()
              .map((_) => _[2]);
            // 获取最大值
            const max = Math.max(Math.max(...values));
            // 获取最小值
            const min = Math.min(...values);
            // 定义最大气泡
            const maxSize4Pin = 50;
            // 定义最小气泡
            const minSize4Pin = 10;
            // 固定套路
            var a = (maxSize4Pin - minSize4Pin) / (max - min);
            var b = maxSize4Pin - a * max;
            return a * val[2] + b;
          },
          label: {
            normal: { show: true, formatter: '', position: 'top' },
            emphasis: {
              show: true,
              formatter: (param) => param.data[3],
              position: 'top'
            }
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(25, 100, 150, 0.5)',
            shadowOffsetY: 5,
            color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              { offset: 0, color: colors1[index] },
              { offset: 1, color: colors2[index] }
            ])
          }
        }));

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return (
              params.value[3] +
              ':' +
              parseInt(params.value[1] * 1000) / 10 +
              '%'
            );
          }
        },
        legend: {
          right: 10,
          top: 20,
          data: MOCK.map((_) => _.name),
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '20%',
          bottom: '10%'
        },
        xAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }

        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          scale: true,
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: getSeries(MOCK)
      };
      return option;
    }
  }
};
</script>
